<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h2>一、组件是什么</h2>
  <div>Vue中每一个.vue文件都可以视为一个组件</div>
  <br>
  <ul>
    <li>调试方便</li>
    <li>降低整个系统的耦合度</li>
    <li>提高可维护性</li>
    <li>复用性高</li>
  </ul>
  <h2>二、插件是什么</h2>
  <div>插件通常用来为 Vue 添加全局功能。插件的功能范围没有严格的限制——一般有下面几种：</div>
  <ul>
    <li>添加全局方法或者属性。如: vue-custom-element</li>
    <li>添加全局资源：指令/过滤器/过渡等。如 vue-touch</li>
    <li>通过全局混入来添加一些组件选项。如vue-router</li>
    <li>添加 Vue 实例方法，通过把它们添加到 Vue.prototype 上实现</li>
    <li>一个库，提供自己的 API，同时提供上面提到的一个或多个功能。如vue-router</li>
  </ul>
  <h2>三、两者的区别</h2>
  <h4>编写组件</h4>
  <div>每一个.vue文件我们都可以看成是一个组件,在编写高复用性组件时，要考虑到传值，插槽的合理使用</div>
  <h4>编写插件</h4>
  <div>vue插件的实现应该暴露一个 install 方法。这个方法的第一个参数是 Vue 构造器，第二个参数是一个可选的选项对象</div>
  <script>
  //   MyPlugin.install = function (Vue, options) {
  //   // 1. 添加全局方法或 property
  //   Vue.myGlobalMethod = function () {
  //     // 逻辑...
  //   }

  //   // 2. 添加全局资源
  //   Vue.directive('my-directive', {
  //     bind (el, binding, vnode, oldVnode) {
  //       // 逻辑...
  //     }
  //     ...
  //   })

  //   // 3. 注入组件选项
  //   Vue.mixin({
  //     created: function () {
  //       // 逻辑...
  //     }
  //     ...
  //   })

  //   // 4. 添加实例方法
  //   Vue.prototype.$myMethod = function (methodOptions) {
  //     // 逻辑...
  //   }
  // }
  </script>
  <h4>组件注册</h4>
  <div>vue组件注册主要分为全局注册与局部注册</div>
  <script>
    // 全局注册通过Vue.component方法，第一个参数为组件的名称，第二个参数为传入的配置项
    // Vue.component('my-component-name', { /* ... */ })

    // 局部注册只需在用到的地方通过components属性注册一个组件
    // const component1 = {...} // 定义一个组件
    // export default {
    //   components:{
    //     component1   // 局部注册
    //   }
    // }
  </script>
  <h4>插件注册</h4>
  <div>插件的注册通过Vue.use()的方式进行注册（安装），第一个参数为插件的名字，第二个参数是可选择的配置项</div>
  <br>
  <div>注册插件的时候，需要在调用 new Vue() 启动应用之前完成,Vue.use会自动阻止多次注册相同插件，只会注册一次</div>
  <h2>使用场景</h2>
  <div>组件 (Component) 是用来构成你的 App 的业务模块，它的目标是 App.vue</div>
  <br>
  <div>插件 (Plugin) 是用来增强你的技术栈的功能模块，它的目标是 Vue 本身</div>
  <br>
  <div>简单来说，插件就是指对Vue的功能的增强或补充</div>
</body>
</html>